'use strict';

import React from 'react';
import Radium from 'radium';
import { IN_DEPLOY_URI, Goto, enterpriseValidate, mobileValidate, registerPasswordValidate, verificationCodeValidate, LoginInfo, ScreenType, Base64 } from 'lightbi-front-utils';
import { BoxInput, VerifyCodeInboxLabelInput } from 'lightbi-front-widget';
import { EnterpriseController, UniqueType } from 'lightbi-front-project';

@Radium
class RegisterForm extends React.Component {
  Props : {
    router : any;
    location : any;
  };

  state : {
    isSubmit : boolean,
    errorMsg : string
  };

  constructor(props) {
    super(props);
    this.state = { isSubmit : false, errorMsg : "" };
    (this: any).onSubmit = this.onSubmit.bind(this);
    (this: any).getUniqueId = this.getUniqueId.bind(this);
    (this: any).getUniqueType = this.getUniqueType.bind(this);

    (this: any).afterSubmitReject = this.afterSubmitReject.bind(this);
    (this: any).afterSubmitResolved = this.afterSubmitResolved.bind(this);
    (this: any).gotoLogin = this.gotoLogin.bind(this);
    this.jumpUri = this.props.location.query['jumpUri'];
  }

  afterSubmitReject(error) {
    this.setState({isSubmit : false, errorMsg : error});
    setTimeout(()=> {
      this.setState({errorMsg : null});
    }, 1000);
  }

  afterSubmitResolved(userVoucher) {
    LoginInfo.login(userVoucher.getEnterpriseId(), userVoucher.getUserId(), userVoucher.getJwt(), false, true);

    if(this.jumpUri == null || this.jumpUri.length == 0)
      Goto('/admin/projects', this.props.router);
    else
      Goto(Base64.decode(this.jumpUri), this.props.router);
  }

  onSubmit() {
    if(this.refs.enterprise.isValid() && this.refs.mobile.isValid() && this.refs.password.isValid() && this.refs.verifyCode.isValid()) {
      this.setState({isSubmit : true});
      EnterpriseController.register(true, this.refs.enterprise.getValue(), this.refs.mobile.getValue(), this.refs.password.getValue(), this.refs.verifyCode.getValue(), this.afterSubmitResolved, this.afterSubmitReject);
    }
  }

  getUniqueId() {
    if(this.refs.mobile.isValid())
      return this.refs.mobile.getValue();
    else
      return null;
  }

  getUniqueType() {
    return UniqueType.MOBILE;
  }

  gotoLogin() {
    if(this.jumpUri == null || this.jumpUri.length == 0)
      this.props.router.push(IN_DEPLOY_URI + '/entrance/login');
    else
      this.props.router.push(IN_DEPLOY_URI + '/entrance/login?jumpUri=' + this.jumpUri);
  }

  render() {
    var buttonClass = "btn btn-primary"+ (this.state.isSubmit ? " disabled " : "");
    var buttonDiv = null;
    if(this.state.isSubmit)
      buttonDiv = <button className={buttonClass} style={{ marginRight: '5px', marginTop: '10px', minWidth: '120px' }} type="submit" onClick={this.onSubmit} >
                    提交中
                    <i className="fa fa-spinner fa-spin" style={{marginLeft: '5px'}} />
                  </button>;
    else
      buttonDiv = <button className={buttonClass} style={{ marginRight: '5px', marginTop: '10px', minWidth: '120px' }} type="submit" onClick={this.onSubmit} >
                    注册
                  </button>;

    return (
      <div className="p-t-15" >
        <div style={{width: '100%', marginBottom: '10px'}}>
          <BoxInput
            ref="enterprise"
            placeholder="正确的名称"
            label="企业名称"
            isReadOnly={this.state.isSubmit}
            validateFunc={enterpriseValidate}
          />
        </div>
        <div style={{width: '100%', marginBottom: '10px'}}>
          <BoxInput
            ref="mobile"
            placeholder="有效手机号"
            label="手机"
            isReadOnly={this.state.isSubmit}
            validateFunc={mobileValidate}
          />
        </div>
        <div style={{width: '100%', marginBottom: '10px'}}>
          <BoxInput
            ref="password"
            placeholder="密码大于6位"
            label={"密码"}
            isReadOnly={this.state.isSubmit}
            validateFunc={registerPasswordValidate}
          />
        </div>
        <div style={{width: '100%', marginBottom: '15px'}}>
          <VerifyCodeInboxLabelInput
            name="验证码"
            ref="verifyCode"
            placeholder="收到的验证码"
            label="验证码"
            isSubmit={this.state.isSubmit}
            validateFunc={verificationCodeValidate}
            getUniqueId={this.getUniqueId}
            getUniqueType={this.getUniqueType}
          />
        </div>
        <div className="m-t-10">
          <a style={{ cursor : 'pointer' }} onClick={this.gotoLogin} >已注册? 去登录</a>
        </div>
        <div style={{marginTop: '10px', textAlign: 'center'}}>
          <div style={{position: 'relative', display: 'inline-block'}}>
            {
              buttonDiv
            }
            {
              !!this.state.errorMsg ?
                <label style={{left:'0px', bottom: '-30px', position: 'absolute', fontSize: '12px', color: '#f55753', display: 'block', textAlign: 'left', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden'}}>{this.state.errorMsg}</label>
                :
                null
            }
          </div>
        </div>
      </div>
    );
  }
}

module.exports=RegisterForm;
